const EducationLevelTemplate = `
  <el-card v-show="isEmpty" class="box-card">
    <div slot="header" class="clearfix">
      <span>{{title}}</span>
    </div>
    <div>
    <el-form ref="form" :disabled="isDisable" label-suffix=":" :model="formData" label-width="117px" size="small">
      <el-row>
      <el-col :span="8">
        <el-form-item label="学历层次">
        <el-select v-model="formData.level" placeholder="请选择">
          <el-option v-for="item in levelList" :key="item.id" :value="item.educationName" :label="item.educationName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="专业">
          <el-input v-model="formData.discipline" placeholder="请输入专业名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="毕业院校">
          <el-input v-model="formData.school" placeholder="请输入毕业院校"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="学习形式">
          <el-select v-model="formData.path" placeholder="请选择">
            <el-option label="全日制" value="全日制"></el-option>
            <el-option label="成人高考" value="成人高考"></el-option>
            <el-option label="网络教育" value="网络教育"></el-option>
            <el-option label="自学考试" value="自学考试"></el-option>
            <el-option label="开放教育" value="开放教育"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="证书编号">
          <el-input v-model="formData.cerNum" placeholder="请输入证书编号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="毕业时间">
          <el-date-picker
            style="width: 100%;"
            value-format="yyyy-MM-dd"
            v-model="formData.time"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item style="height: 156px;" label="毕业证">
          <el-upload
            action="#"
            ref="byz"
            :file-list="byzFile"
            :auto-upload="false"
            :limit="limitCount"
            list-type="picture-card"
            :on-change="(file, fileList) => handlePictureChange(file, fileList, byzName)"
            :on-preview="handlePicturePreview"
            :on-remove="(file, fileList) => handleRemove(file, fileList, byzName)">
            <i style="line-height: 148px;" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item style="height: 156px;" label="学位证">
          <el-upload
            action="#"
            ref="xwz"
            :file-list="xwzFile"
            :auto-upload="false"
            :limit="limitCount"
            list-type="picture-card"
            :on-change="(file, fileList) => handlePictureChange(file, fileList, xwzName)"
            :on-preview="handlePicturePreview"
            :on-remove="(file, fileList) => handleRemove(file, fileList, xwzName)">
            <i style="line-height: 148px;" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item style="height: 156px;" label="电子注册表">
          <el-upload
            action="#"
            ref="zcb"
            :file-list="zcbFile"
            :auto-upload="false"
            :limit="limitCount"
            list-type="picture-card"
            :on-change="(file, fileList) => handlePictureChange(file, fileList, zcbName)"
            :on-preview="handlePicturePreview"
            :on-remove="(file, fileList) => handleRemove(file, fileList, zcbName)">
            <i style="line-height: 148px;" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-card>
`;

Vue.component("app-education-level", {
  name: "app-education-level",
  props: ["levelnum", "type", "fileMap"],
  template: EducationLevelTemplate,
  computed: {
    isDisable() {
      return this.type === "look";
    },
    title() {
      ["", "look"].includes(this.type) || (this.isEmpty = true);
      return this.levelnum === 1 ? "第一学历" : "第二学历";
    },
    byzName() {
      return this.levelnum === 1 ? "biyezheng1" : "biyezheng2";
    },
    xwzName() {
      return this.levelnum === 1 ? "xueweizheng1" : "xueweizheng2";
    },
    zcbName() {
      return this.levelnum === 1 ? "zhucebiao1" : "zhucebiao2";
    },
    byzFile() {
      const file = this.fileMap.find((item) => item.property === this.byzName);
      if (file) {
        !this.isEmpty && (this.isEmpty = true);
        this.$nextTick(() => {
          this.$refs.byz.$children[1].$el.style = "display: none;";
        });
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.byz.$children[1].$el.style = "display: block;";
        });
        return [];
      }
    },
    xwzFile() {
      const file = this.fileMap.find((item) => item.property === this.xwzName);
      if (file) {
        !this.isEmpty && (this.isEmpty = true);
        this.$nextTick(() => {
          this.$refs.xwz.$children[1].$el.style = "display: none;";
        });
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.xwz.$children[1].$el.style = "display: block;";
        });
        return [];
      }
    },
    zcbFile() {
      const file = this.fileMap.find((item) => item.property === this.zcbName);
      if (file) {
        !this.isEmpty && (this.isEmpty = true);
        this.$nextTick(() => {
          this.$refs.zcb.$children[1].$el.style = "display: none;";
        });
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.zcb.$children[1].$el.style = "display: block;";
        });
        return [];
      }
    },
  },
  watch: {
    formData: {
      handler: function (val) {
        for (let key in val) {
          // 如果不是查看操作就全部显示
          if (val[key]) {
            this.isEmpty = true;
            return;
          }
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      limitCount: 1,
      isEmpty: false,
      dialogVisible: false,
      dialogImageUrl: "",
      fileDic: new Map(),
      levelList: [
        { id: 1, educationName: "初中" },
        { id: 2, educationName: "高中" }, 
        { id: 3, educationName: "中专" },
        { id: 4, educationName: "大专" },
        { id: 5, educationName: "本科" },
        { id: 6, educationName: "职高" },
        { id: 7, educationName: "硕士研究生" },
        { id: 8, educationName: "博士研究生" },
        { id: 9, educationName: "其他" },
      ],
      formData: {
        level: "",
        discipline: "",
        school: "",
        path: "",
        cerNum: "",
        time: "",
      },
    };
  },
  methods: {
    hideOrShowUpload(name, isShow) {
      switch (name) {
        case "biyezheng1":
        case "biyezheng2":
          console.log(`byz`, this.$refs.byz);
          this.$refs.byz.$children[1].$el.style = isShow
            ? ""
            : "display: none;";
          break;
        case "xueweizheng1":
        case "xueweizheng2":
          console.log(`xwz`, this.$refs.xwz);
          this.$refs.xwz.$children[1].$el.style = isShow
            ? ""
            : "display: none;";
          break;
        case "zhucebiao1":
        case "zhucebiao2":
          console.log(`zcb`, this.$refs.zcb);
          this.$refs.zcb.$children[1].$el.style = isShow
            ? ""
            : "display: none;";
          break;
      }
    },
    handleRemove(file, fileList, name) {
      this.dialogImageUrl = "";
      this.fileDic.delete(name);
      this.hideOrShowUpload(name, true);
    },
    handlePictureChange(file, fileList, name) {
      console.log(`fileProgress=>>>`, file);
      console.log(`fileListProgress=>>>`, fileList);
      console.log(`name`, name);
      this.fileDic.set(name, file.raw);
      this.hideOrShowUpload(name, false);
    },
    handlePicturePreview(file) {
      console.log(`fileList>>>>>`, this.fileList);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
});
